<script setup>
const msg = '大白';
const html = '<h1>你好</h1>'
</script>
<template>
    <!-- 
        在模板中，可以直接访问到组件中声明暴露的变量
        同时vue也提供了有限的能够全局访问的方法：
            例如：Date，Math，RegExp...
        除此之外的全局变量如果需要使用，可以手动添加
        {{ 表达式 }}插值语法中只能填充表达式，即有返回值的语句
        插值实际上是在修改元素的textContent，如果内容中含有标签，不会对标签进行解析，而是直接转义输出
     -->

    <!-- 
        指令：
        -指令模板中为标签是指的一些特殊属性，他可以用来设置标签如何显示内容
        -使用指令时不需要使用{{}}来包裹表达式
        -指令使用v-开头
            v-text 将表达式的值作为元素textContent插入，即不解析标签，直接插入
            v-html 将表达式的值作为元素的innerHTML插入，会解析标签并显示，有xss攻击的风险

     -->
    <h1>{{ msg }}</h1>
    <h1>{{ hello }}</h1>
    <div>{{ html }}</div>
    <div v-text="html"></div>
    <div v-html="html"></div>
</template>